<template>
    <div class="aitalk">
            <div class="dialog" v-for="item in dialog" :key="item.content">
                <div class="question" v-if="item.role=='user'">
                    <div class="userpic">
                        <img src="../pic/police1.png">
                    </div>
                    <div class="userdialog">{{ item.content }}</div>
                </div>
                <div class="answer" v-if="item.role=='ai'"> 
                    <div class="ainame">
                        <img src="../pic/deepseek1.png">
                    </div>
                    <div class="aidialog">{{ item.content }}</div>
                </div>
            
        </div>
    </div>
</template>

<script>
export default {
    name: "aitalk",
    props:{

    },
    data() {
    return {
        dialog:[
            {
                role:"ai",
                content:"我是你的数据分析AI助手，有什么需要分析的数据可以点击下方上传按钮将数据上传，也可以问我任何问题。"
            },]
      }
    
  },
    created(){
        
         
    },
    mounted() {
        
    },
    methods:{
        toBottom(){
        var time = 0;
        var loop =  setInterval(() => {
              const box = document.querySelector('.aitalk');
              box.scrollTo(0, box.scrollHeight - box.clientHeight);
              time++;
              if(time>20){
                  clearInterval(loop);
              }
            }, 300);
        },
        formatDialogToMarkdown(){
            let markdownContent = "# 对话记录\n\n";

            this.dialog.forEach((item, index) => {
   
              markdownContent += `# ${item.role  === 'user' ? '❓用户' : '💡AI'}\n\n`;
              markdownContent += `- ${item.content}\n\n`;
            });

            return markdownContent;
        },
        saveToMarkdownFileAndDownload(markdownContent, fileName) {
            const blob = new Blob([markdownContent], { type: 'text/markdown' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', `${fileName}.md`);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        },
        downFile(){
            const markdownContent = this.formatDialogToMarkdown(this.dialog);
            this.saveToMarkdownFileAndDownload(markdownContent, 'dialog-record');
        }
        

        
    }
}
</script>

<style scoped>
.dialog{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    
}
.question {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    width: 100%;
    
}
.userpic {
    box-sizing: border-box;
    width: 10%;
    height:10%;
    margin-right: 10px;
}
.answer {
    box-sizing: border-box;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    width: 100%;
}
.aitalk {
    box-sizing: border-box;
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    height: 790px;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox 隐藏滚动条 */
}
.userdialog {
    width: 0;
    flex:1;
    max-width: fit-content;
    background-color: rgb(187,220,241,0.6);
    border-radius: 5px;
    padding: 15px;
    text-align: left;
    margin-right: 30px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-top: 5px;
    transition: box-shadow 500ms, transform 0.2s ease-in-out;
}
.userdialog:hover {
  box-shadow: 5px 5px 5px -1px rgba(0, 0, 0, 0.3);
  transform: translate(-2px, -2px);
}
.aidialog{
    max-width: fit-content;
    background-color: rgb(0,117,181,0.6);
    border-radius: 5px;
    padding: 15px;
    text-align: left;
    margin-left: auto;
    margin-bottom: 20px;
    margin-top: 5px;
    color: white;
    transition: box-shadow 500ms, transform 0.2s ease-in-out;
    animation: 
        typing 3.5s steps(40, end), /* 打字动画 */
        blink-caret .75s step-end infinite; /* 光标闪烁动画 */
}
 @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
.aidialog:hover {
  box-shadow: 5px 5px 5px -1px rgba(0, 0, 0, 0.3);
  transform: translate(-2px, -2px);
}
.ainame {
    margin-left: 10px;
    text-align: right;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
img {
   width: 60px;
   height: 60px; 
}
.loading {
    position: absolute;
    top: 30%;
    left: 50%;
}


</style>

